Fric-frac Admin/Index wireframe naar HTML

Design

We vertrekken van de wireframe (Fric-frac Wireframes) voor de Index pagina om de HTML indeling op te stellen.

Oplossing

Maak een map met de naam Admin in de Views map. Voeg op dezelfde manier als voor de Home Index Pagina, de Index pagina toe. Geef er de naam Index.cshtml aan en plaats het bestand in de map Views/Admin map.

In het showroom element plaatsen we een tegel voor elke entiteit. Zo'n entiteitstegel is een a element. Als de gebruiker op zo'n tegel klikt wordt die doorverwezen naar de Index pagina van de desbetreffende entiteit.

Voor de afbeeldingen tussen die entiteitstegels gebruiken we div's die voorlopig leeg zijn.

@{
    Layout = "~/Views/Shared/MasterLayout.cshtml";
}

<nav class="control-panel">
    <a href="/Home/Index" class="tile">
        <span class="icon-menu2"></span>
        <span class="screen-reader-text">Home</span>
    </a>
    <h1 class="banner">Fric-frac</h1>
</nav>
<section class="show-room index">
    <a class="tile" href="/Person/Index">
        <span class="icon-group"></span>
        <span class="screen-reader-text">Index Personen</span>
        <h1>Index Personen</h1>
    </a>
    <a class="tile" href="/Country/Index">
        <span class="icon-earth"></span>
        <span class="screen-reader-text">Index Landen</span>
        <h1>Index Landen</h1>
    </a>
    <div></div>
    <div></div>
    <a class="tile" href="/Role/Index">
        <span class="icon-group2"></span>
        <span class="screen-reader-text">Index Rollen</span>
        <h1>Index Rollen</h1>
    </a>
    <a class="tile" href="/User/Index">
        <span class="icon-user"></span>
        <span class="screen-reader-text">Index Gebruikers</span>
        <h1>Index Gebruikers</h1>
    </a>
    <div></div>
    <a class="tile" href="/Event/Index">
        <span class="icon-lightning"></span>
        <span class="screen-reader-text">Index Events</span>
        <h1>Index Events</h1>
    </a>
    <a class="tile" href="/EventCategory/Index">
        <span class="icon-tag"></span>
        <span class="screen-reader-text">Index Eventcategorieën</span>
        <h1>Index Eventcategorieën</h1>
    </a>
    <a class="tile" href="/EventTopic/Index">
        <span class="icon-tag-stroke"></span>
        <span class="screen-reader-text">Index Eventtopics</span>
        <h1>Index Eventtopics</h1>
    </a>
    <div></div>
</section>